---
title: CSS Variables Plugin | gluestack-style
description: gluestack-style provides a Plugin to inject all your tokens as CSS variables. An internal plugin to insert all theme tokens as css variables in your global styles.
canonical: https://gluestack.io/style
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="styled/plugins/CSS Variables Plugin" />

# CSS Variables Plugin

> 💡 This is a web-only plugin

This internal plugin inserts all theme tokens as CSS variables in your global styles.

## Example:

Include the AddCssTokenVariables Plugin in your createStyled array.Once this is done, you can directly use the tokens in your styles as CSS variables.

```jsx

Initialize the plugin with: const styledCssTokensVariables = createStyled([new AddCssTokenVariables({})])

const StyledView = styledCssTokensVariables(
  View,
  {
    w: 200,
    h: 200,
    bg: '$blue500',
  },
  {
    descendantStyle: ['_text'],
  }
);

const StyledText = styledCssTokensVariables(
  Text,
  {},
  {
    ancestorStyle: ['_text'],
  }
);

export function CSSVariables() {
  return (
    <Wrapper>
      <StyledView>
        <StyledText
          style={{
            color: 'var(--gluestack-style-colors-orange300)',
            margin: 'var(--gluestack-style-space-4)',
          }}
        >
          Hello, World!
        </StyledText>
      </StyledView>
    </Wrapper>
  );
}
```
